<template>
  <el-container>
    <el-aside>
      <el-tree
        :data="orgTree"
        :default-expand-all="true"
        :highlight-current="true"
        :props="defaultProps"
        empty-text="暂无组织机构"
        @node-click="selectOrgNode">
      </el-tree>
    </el-aside>
    <el-main>
      <div class="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><a href="javascript:void(0);" @click="listTop">组织管理</a></el-breadcrumb-item>
          <el-breadcrumb-item v-if="selectedNode.label">{{selectedNode.label}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="form">
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" round @click="edit(true)">添加</el-button>
          </el-form-item>
          <el-form-item label="编码">
            <el-input v-model="page.cond.code" placeholder="按编码查询" clearable></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="page.cond.name" placeholder="按名称查询" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="list(true)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content">
        <el-table
          :data="result.records"
          border
          empty-text="暂无数据"
          height="100%">
          <el-table-column type="index" align="center"></el-table-column>
          <el-table-column prop="code" label="编码" min-width="150"></el-table-column>
          <el-table-column prop="name" label="名称"  min-width="150"></el-table-column>
          <el-table-column prop="shortName" label="简称"  min-width="150"></el-table-column>
          <el-table-column prop="seq" label="序号"  min-width="50"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template #default="scope">
              <el-button @click="edit(null, scope.row)" type="text" link size="small">编辑</el-button>
              <el-button @click="remove(scope.row)" type="text" link size="small">删除</el-button>
              <el-button @click="getJoin(scope.row)" type="text" link size="small">角色</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="changePage"
          :page-size="result.size"
          :total="result.total">
        </el-pagination>
      </div>
      <!-- 模态框 -->
      <el-dialog
        title="编辑"
        ref="form-dialog"
        v-model="visible.edit"
        :close-on-click-modal="false"
        width="600px">
        <div>
          <el-form ref="form" :model="info" label-width="80px" :rules="rules">
            <el-form-item label="编码" prop="code">
              <el-input v-model="info.code" placeholder="请输入编码"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="info.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="简称" prop="shortName">
              <el-input v-model="info.shortName" placeholder="请输入简称"></el-input>
            </el-form-item>
            <el-form-item label="附加值1" prop="value1">
              <el-input v-model="info.value1" placeholder="附加值1"></el-input>
            </el-form-item>
            <el-form-item label="附加值2" prop="value2">
              <el-input v-model="info.value2" placeholder="附加值2"></el-input>
            </el-form-item>
            <el-form-item label="附加值3" prop="value3">
              <el-input v-model="info.value3" placeholder="附加值3"></el-input>
            </el-form-item>
            <el-form-item label="序号" prop="seq">
              <el-input-number controls-position="right" :precision="2" :step="1" v-model="info.seq"></el-input-number>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="visible.edit = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- role set 模态框 -->
      <el-dialog
        title="配置"
        ref="form-dialog"
        v-model="visible.role"
        :close-on-click-modal="false"
        width="600px"
      >
        <div>
          <el-form ref="form_join" :model="join" label-width="80px">
            <el-form-item label="角色">
              <el-select
                v-model="join.dstList"
                multiple
                placeholder="请选择"
                style="width: 100%"
                value-key="id"
              >
                <el-option
                  v-for="item in elemOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible.role = false">取 消</el-button>
          <el-button type="primary" @click="saveJoin">确 定</el-button>
        </span>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      visible: {
        edit: false,
        role: false,
      },
      orgTree: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      page: {
        current: 1,
        size: 10,
        total: 0,
        orders: [
          { column: "seq", asc: true }
        ],
        cond: {},
      },
      result: {},
      // 当前选择节点
      selectedNode: {},
      info: {
        id: null,
        code: null,
        name: null,
        shortName: null,
        parentId: null,
        value1: null,
        value2: null,
        value3: null,
        seq: 1
      },
      join: {
        type: null,
        srcId: null,
        srcCode: null,
        dstIds: null,
        dstCodes: null,
        dstList: null // ID前端列表
      },
      elemOptions: [], // 加载的元素列表
      rules: {
        code: [
          { required: true, message: '必填'},
        ],
        name: [
          { required: true, message: '必填'},
        ],
        shortName: [
          { required: true, message: '必填'},
        ],
        seq: [
          { required: true, message: '必填'},
        ],
      }
    };
  },
  mounted() {
    this.getOrgTree();
    this.list();
    this.loadElement();
  },
  methods: {
    // 获取树结构
    getOrgTree() {
      this.$http.post(`/admin/sys/rbac/org/getOrgTree`, {}, res => {
        this.orgTree = res.data;
      }, false, true, false);
    },
    // 选择树节点
    selectOrgNode(node) {
      this.selectedNode = node;
      this.list();
    },
    // 分页查询
    list(first) {
      if (first) {
        this.page.current = 1;
      }
      this.page.cond.parentId = this.selectedNode.id || null;
      this.$http.post("/admin/sys/rbac/org/list", this.page, res => {
        this.result = res.data;
      }, false, true, false);
    },
    // 列出顶层组织
    listTop() {
      this.selectedNode = {};
      this.list(true);
    },
    // 编辑数据,add为true表示新增
    edit(add, row) {
      this.visible.edit = true;
      this.$nextTick(() => {
        this.$utils.resetObj(this.info, null);
        if (add) {
          this.$refs['form'].resetFields();
        } else {
          this.$utils.copyObj(row, this.info);
        }
      });
    },
    // 保存数据
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.info.parentId = this.selectedNode.id || null;
          this.$http.post("/admin/sys/rbac/org/save", this.info, () => {
            this.visible.edit = false;
            this.list();
            this.getOrgTree();
          }, true, true, true, this.$refs['form-dialog'].dialogRef);
        }
      });
    },
    remove(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("/admin/sys/rbac/org/remove", row, () => {
          this.list();
          this.getOrgTree();
        }, true, true, true);
      });
    },
    // 当前页切换
    changePage(current) {
      this.page.current = current;
      this.list();
    },
    // 加载元素列表
    loadElement() {
      this.$http.post(
        "/admin/sys/rbac/role/list",
        {
          current: 1,
          size: 1000,
          orders: [{ column: "seq", asc: true }]
        },
        res => {
          this.elemOptions = res.data.records || [];
        }
      );
    },
    // 关联信息
    getJoin(row) {
      this.$http.post(
        "/admin/sys/rbac/join/getByTypeAndSrcId",
        {
          type: "org_role",
          srcId: row.id
        },
        res => {
          this.join = {
            type: "org_role",
            srcId: row.id,
            srcCode: row.code
          };
          let data = res.data;
          if (data) {
            this.join.dstIds = data.dstIds;
            this.join.dstCodes = data.dstCodes;
            let dstIdList = JSON.parse(this.join.dstIds || "[]");
            let dstCodeList = JSON.parse(this.join.dstCodes || "[]");
            if (dstIdList.length > 0 && dstCodeList.length > 0) {
              let dstList = [];
              for (let i in dstIdList) {
                if (dstIdList.hasOwnProperty(i) && dstCodeList.hasOwnProperty(i)) {
                  dstList.push({ id: dstIdList[i], code: dstCodeList[i]});
                }
              }
              this.join.dstList = dstList;
            }
          }
          this.visible.role = true;
        }
      );
    },
    // 保存关联信息
    saveJoin() {
      let idList = [];
      let codeList = [];
      if (this.join.dstList && this.join.dstList.length > 0) {
        for (let i in this.join.dstList) {
          if (this.join.dstList.hasOwnProperty(i)) {
            idList.push(this.join.dstList[i].id);
            codeList.push(this.join.dstList[i].code);
          }
        }
      }
      this.join.dstIds = JSON.stringify(idList);
      this.join.dstCodes = JSON.stringify(codeList);
      this.$http.post(
        "/admin/sys/rbac/join/save",
        this.join,
        res => {
          this.visible.role = false;
        },
        true,
        true,
        true,
        this.$refs["form-dialog"].dialogRef
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
  overflow: hidden;

  .el-aside {
    width: 250px;
    padding: 10px 25px 10px 10px;
    border-right: 1px solid #eeeeee;
  }

  .el-main {
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;

    .header {
      padding: 20px;
      border-bottom: 1px solid #eeeeee;
      text-align: left;
    }

    .form {
      padding: 20px 20px 0 20px;
      font-size: 14px;
      text-align: left;
    }

    .content {
      flex: 1;
      height: 0;
    }

    .footer {
      padding: 5px;
    }
  }
}
</style>